<script setup lang="ts">
import { get_JiuyeXinzi } from '@/request';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
var option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  legend: {
    data: ['30K+', '20K~30K', '15K~20K', '10K~15K', '10K及以下'],
    textStyle: { color: '#fff' },
    icon: 'circle'
  },
  series: [
    {
      name: '',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 60, name: '30K' },
        { value: 40, name: '20K~30K' },
        { value: 20, name: '15K~20K' },
        { value: 80, name: '10K~15K' },
        { value: 100, name: '10K及以下' }
      ]
    }
  ]
};
const Xinzi = ref(null)
onMounted(() => {
  var myChart = echarts.init(Xinzi.value);
  get_JiuyeXinzi().then(resp => {
    console.log('毕业生薪资分布', resp.data.data)
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })


})

</script>

<template>
  <div id="Xinzi" ref="Xinzi">

  </div>
</template>

<style scoped lang="scss">
#Xinzi {
  width: 100%;
  height: 40vh;
  // border: #fc2 solid 1px;
}
</style>
